import React from 'react';
import { View, Image, ScrollView } from 'react-native';
import ViewShot from 'react-native-view-shot';
import FastImage from "react-native-fast-image"
import { Lt, Color, Label, Jpp, Jx, Cimage, Dialog, Touch, Images } from "../_utils";
import { ShareCombine } from './ShareCombine';
import { cHome } from './_home';
import { eShare } from '../_util';


const FimageStyle = {width:Jpp.width, height:Jpp.height};
// 分享界面 图片组
export class ShareAlbum extends React.Component{
    constructor(props){
        super(props);
        const { images, datas } = this.props;
        this.state = {
            selects : images.map(v=>false),
        }
        this.selects = [];
        this.albums = images.map((v, i)=>{
            if(datas && datas[i].imageCombine){
                return {uri : datas[i].imageCombine}
            }
            return <Cimage uri={v} style={FimageStyle} resizeMode = {FastImage.resizeMode.contain}/>
        });
        this.shotRefs = images.map(v=>null);
        this.finishs = images.map(v=>true); 
        this.shotables = images.map(v=>false);

        // this.onCombineRef = this.onCombineRef.bind(this);
        // this.onShotCombine = this.onShotCombine.bind(this);
    }
    componentDidMount(){
        // isCombine
        const { eshare, datas, onShotCombine } = this.props;
        // if(!isCombine){
        if(eshare == eShare.material){
            // 推广素材
            this.shotables[0] = true;
            this.onSelect(0);
        }else if(eshare == eShare.hotdaily){
            // 每日爆款 
            datas.map((v, i)=>{
                if(v.imageCombine){
                    this.shotables[i] = true;
                    if(i == 0){
                        this.onSelect(0);
                    }
                    onShotCombine && onShotCombine(i, v.imageCombine);
                }
            })
        }
    }
    // onCombineRef(ref){
    //     this.onShotRef(ref, 0);
    // }
    // 合成第一张图
    onShotCombine(i, image){
        if(image){
            this.albums[i] = {uri:image};
            this.shotables[i] = true;
            if(i == 0){
                this.onSelect(0);
            }
            const { onShotCombine } = this.props;
            onShotCombine && onShotCombine(i, image);
        }
    }
    onShotRef(ref, i){
        this.shotRefs[i] = ref;
        if(ref && this.finishs[i]){
            this.shotables[i] = true;
        }
    }
    // 不用了
    onLoadEnd(i){
        this.finishs[i] = true;
        if(this.shotRefs[i]){
            this.shotables[i] = true;
            if(i == 0 && !this.props.data){
                // 朋友圈
                this.onSelect(0);
            }
        }
    }
    // 点击图片, 进入相册浏览模式
    onAlbum(idx){
        return cHome.onAlbum(r=>this.albumRef=r, {
            images: this.albums,
            defaultIndex:idx,
            onPress : ()=>{this.albumRef && this.albumRef.close()},
        });
    }
    toSelect(index, ref, selectsCount){
        return {
            index, 
            ref, // 选中就是引用
            selectsCount, 
        }
    }
    // 选中 打钩/ 取消选中
    onSelect(i){
        if(!this.shotables[i]){
            Dialog.toast("正在加载,请稍后");
            return;
        }
        const { onSelect } = this.props;
        let { selects } = this.state;
        selects[i] = !selects[i];
        this.setState({selects});
        if(!onSelect){
            return;
        }
        let targets = [];
        selects.map((v, i)=>{
            if(v){
                targets.push(i);
            }
        });
        this.selects = targets.map((v)=>{
            return this.toSelect(v, this.shotRefs[v], targets.length)
        })
        if(targets.length == 1){
            targets = targets[0];
            onSelect(this.toSelect(targets, this.shotRefs[targets], 1));
            return;
        }
        onSelect(this.toSelect(i, (selects[i] ? this.shotRefs[i] : null), targets.length));
    }
    getSelects(){
        return this.selects;
    }
    render(){
        // isCombine
        const { images, data, datas, eshare } = this.props;
        const { selects } = this.state;
        return <ScrollView horizontal={true}>
            <View style={{flexDirection:"row", padding:Lt.pad}}>
            {
                <View style={{position:"absolute"}}>
                {
                    images.map((v, i)=>{
                        // 商品第一张图用合成的shot
                        // if(isCombine && i == 0 && data || datas){
                        if((eshare == eShare.hotdaily) || (eshare == eShare.detail && i == 0 && data)){
                            return <ShareCombine
                                key={i}
                                ref={r=>this.onShotRef(r, i)}
                                style = {{position:"absolute"}}
                                delta = {1200}
                                data = {eshare == eShare.detail ? data : datas[i]} 
                                image = {v} 
                                qrcode = { eshare == eShare.detail ?  data.qrcode : datas[i].qrcode}
                                onShot = {
                                    datas && datas[i].imageCombine ? null :
                                    image=>this.onShotCombine(i, image)
                                }
                            />
                        }
                        return <ViewShot 
                            key={i} 
                            ref={r=>this.onShotRef(r, i)}
                            style={FimageStyle}
                        >
                            <Cimage 
                                uri={v} 
                                style={FimageStyle}
                                // onLoadEnd={this.onLoadEnd.bind(this, i)}
                                resizeMode={FastImage.resizeMode.contain}
                            />
                        </ViewShot>
                    })
                }
                </View>
            }
            <View style={{position:"absolute", width:Jpp.width, height:Jpp.height, backgroundColor:"white"}}/>
            {
                images.map((v, i)=>{
                    return <Touch key={i} onPress={this.onAlbum.bind(this,i)}>
                        <View style={{width:120, height:120, borderRadius:3, marginRight:5}}>
                            <Cimage key={i} style={{position:"absolute", width:120, height:120, borderRadius:3}} uri={v}/>
                            <Touch style={{padding:5}} onPress = {this.onSelect.bind(this,i)}>
                                <Image source={selects[i] ? Images.gouxuan_fx : Images.weixuan_fx}/>
                            </Touch>
                        </View>
                    </Touch>
                })
        }
        </View>
        </ScrollView>
    }
}
